<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/24
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #app{
            width: 600px;
            height: 700px;
            position: absolute;
            top: 100px;
            left: 400px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm" action="register" method="post">
        <el-form-item label="账号" prop="name">
            <el-input v-model="ruleForm.name" name ="name" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" name ="password" autocomplete="off" type="password"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="sure_password">
            <el-input v-model="ruleForm.sure_password" name ="sure_password" autocomplete="off" type="password"> </el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="youname">
            <el-input v-model="ruleForm.youname" name ="youname" ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="size">
            <el-radio-group v-model="ruleForm.size" >
                <el-radio label="男" name ="size1"></el-radio>
                <el-radio label="女" name ="size2"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" name ="email" ></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="school">
            <el-input v-model="ruleForm.school" name ="school" ></el-input>
        </el-form-item>
        <el-form-item label="所在城市" prop="city">
            <el-select v-model="ruleForm.city" placeholder="请选择城市" name ="city" >
                <el-option label="沈阳" value="01" name="city"></el-option>
                <el-option label="大连" value="02" name="city"></el-option>
                <el-option label="鞍山" value="03" name="city"></el-option>
                <el-option label="本溪" value="04" name="city"></el-option>
                <el-option label="葫芦岛" value="05" name="city"></el-option>
                <el-option label="抚顺" value="06" name="city"></el-option>
                <el-option label="辽阳" value="07" name="city"></el-option>
                <el-option label="丹东" value="08" name="city"></el-option>
                <el-option label="阜新" value="09" name="city"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" name ="birthday" style="width: 100%;" ></el-date-picker>
            </el-col>

        </el-form-item>



        <el-form-item label="备注" prop="txt">
            <el-input type="textarea" v-model="ruleForm.txt" name ="txt" ></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="submit" @click="submitForm('ruleForm')" class = "create_submit">立即创建</el-input>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>

</body>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.sure_password !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    name: '',
                    password: '',
                    sure_password: '',
                    size:'',
                    size1: '',
                    size2: '',
                    youname: '',
                    email: '',
                    city: '',
                    birthday:'',
                    school:''
                },rules: {
                    name: [
                        { required: true, message: '请输入账号名称', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true,validator: validatePass, trigger: 'blur' }
                    ],
                    sure_password: [
                        { required: true,validator: validatePass2, trigger: 'blur' }
                    ],
                    youname: [
                        { required: true, message: '请输入正确名字', trigger: 'blur' },
                        { min: 2, max: 4, message: '长度在 2 到 4 个汉字', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change'}
                    ],
                    size: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    birthday: [
                        { required: true,type: 'date', required: true, message: '请选择日期', trigger: 'change'  }
                    ]
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },




    })
</script>
</html>

